<template>
	<view class="market-home">
		<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/09673202508121156597608.png"
			mode="widthFix" class="bg" />

		<view class="content">
			<view class="custom-header">
				<view class="header-item" @click="toRoute('/pages/home/index')">
					<uv-icon name="arrow-left" size="17" color="#333" />
					<text class="lbl_name">邻集市</text>
				</view>

				<view class="header-item">
					<uv-icon name="map" size="17" color="#333" />
					<text class="city">{{city}}</text>
				</view>
			</view>
			<uv-search v-model="keyword" bgColor="#FFFFFF" :showAction='false' placeholder="输入你要找的服务"
				placeholderColor="#B1B1B1" />
			<swiper class="swiper" v-if="navList.length" :style="{height:swiperHeight}">
				<swiper-item v-for="(e,i) in Math.ceil(navList.length / 10)">
					<uv-grid :border="false" col="5">
						<uv-grid-item :key="index" @click="toFenlei(item.id)"
							v-for="(item,index) in navList.slice(i * 10, (i + 1) * 10)">
							<uv-image :src="item.pic" width="40" height="40" />
							<uv-text :text="item.cate_name" align="center" size="12" margin="5px 0 15px 0" />
						</uv-grid-item>
					</uv-grid>
				</swiper-item>
			</swiper>

			<uv-tabs :list="tabslist" @click="tabsClick" lineColor="#C52923" lineWidth="30" />
			<uv-gap height="15" bgColor="transparent" />
			<itemPage :list="list" />

			<view class="noMode" v-if="finished">没有更多了</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		nextTick,
		watch
	} from 'vue'

	import {
		getMarketProduct,
		getCityWebAreaInfo
	} from '@/api'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import itemPage from './item2.vue'
	import {
		useTabbarStore,
		useCustomTabbarStore
	} from '@/store'


	const tabbarCustomStore = useCustomTabbarStore()
	const tabbarStore = useTabbarStore()
	const tabbarActive = computed(() => tabbarStore.active)
	const emit = defineEmits(['tabbar'])
	const props = defineProps({
		navList: {
			type: Array,
			default: () => []
		}
	})
	const page = ref(1)
	const sort = ref(0)
	const list = ref([])
	const total = ref(0)
	const keyword = ref('')
	const city = ref('获取中')
	const latitude = ref(null)
	const longitude = ref(null)
	const finished = ref(false)
	const tabslist = ref([{
		name: '综合排序'
	}, {
		name: '销售量'
	}, {
		name: '好评'
	}])
	const swiperHeight = ref('160px')
	const getCityLocal = async () => {
		const result = await getCityWebAreaInfo();
		if (result.code == 200) {
			let res = result.result.content;
			city.value = res.address_detail.district.includes('市') ? res.address_detail.district : res
				.address_detail.city

		}
	}


	const toRoute = (url) => {
		if (url === '/pages/home/index') {
			tabbarCustomStore.setCurrent(0)
			return uni.reLaunch({
				url
			})
		}
		uni.navigateTo({
			url
		})
	}

	const tabsClick = async (e) => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		sort.value = e.index
		await getProduct()
		uni.hideLoading()
	}

	const getProduct = async () => {
		if (page.value === 1) list.value = []
		const {
			result
		} = await getMarketProduct({
			page: page.value,
			limit: 10,
			sort: sort.value,
		})
		page.value++
		total.value = result.total
		list.value = [...list.value, ...result.data]
		if (total.value === list.value.length) finished.value = true
	}

	const toFenlei = (i) => {
		emit('tabbar', i)
	}

	onReachBottom(() => {
		if (tabbarActive.value == 0) {
			if (finished.value) return
			getProduct()
		}
	})
	watch(() => props.navList, (newVal) => {
	  if (newVal.length > 0) {
	    nextTick(() => {
	      swiperHeight.value = newVal.length > 5 ? '160px' : '90px';
	    })
	  }
	}, { immediate: true, deep: true })
	const init = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		await getProduct()
		getCityLocal()
		uni.hideLoading()
	}

	init()
</script>

<style lang="scss" scoped>
	.custom-header {
		display: flex;
		margin-bottom: 20upx;
		gap: 20upx;

		.header-item {
			display: flex;
			align-items: center;
		}

		.lbl_name {
			font-size: 34upx;
			color: #333;
			margin-left: 8upx;
		}

		.city {
			font-size: 28upx;
			color: #333;
			margin-left: 8upx;
		}
	}

	.market-home {
		position: relative;
		padding-top: calc(var(--status-bar-height) + 30upx);

		.bg {
			z-index: 1;
			width: 100%;
			position: absolute;
			top: var(--window-top);
		}

		.content {
			z-index: 2;
			padding: 30upx;
			position: relative;
		}

		.swiper {
			height: 320upx;
			padding: 0 20upx;
			margin-top: 20upx;
			padding-top: 50upx;
			border-radius: 20upx;
			background-color: #fff;
		}
	}
</style>